<template>
    <div class="bonus">
        <client-only>
            <main v-loading="loading">
                <dl v-if="bonus.length != 0" v-infinite-scroll="initData" :infinite-scroll-immediate="false"
                    infinite-scroll-distance=200>
                    <dd v-for="(item, index) in bonus" :key="index">
                        <h3>{{ $t("language.bonus.title") }}</h3>
                        <strong>{{ $dot(item.balanceBonus) }} BRL</strong>
                        <span>{{ $t("language.bonus.transform") }} BRL {{ $dot(item.validBets) }}</span>

                        <el-progress :text-inside="true" :show-text="false" color="#fff" :stroke-width="15"
                            :percentage="parseInt(item.current) / parseInt(item.target) * 100" />
                        <div>
                            <i>{{ $t("language.bonus.starttime") }}</i><i>{{ $t("language.bonus.endtime") }}</i>
                        </div>
                        <div>
                            <span>{{ item.accessDate }}</span><span>{{ item.expireDate }}</span>
                        </div>
                    </dd>
                </dl>
                <div class="nodata" v-if="bonus.length == 0 && !loading">
                    <NuxtImg src="/img/bg2.png" alt="" />
                    <p>{{ $t("language.rechange.tips") }}</p>
                </div>
            </main>

        </client-only>

    </div>

</template>
<script setup lang="ts">
import { reactive, nextTick,ref,shallowRef, onBeforeMount, onActivated } from "vue";
// 获取用户信息
const store = useStore()
let userinfo = computed(() => store.userinfo)

let bonusForm = reactive({
    id: userinfo.value.gameID,
    pageIndex: 1,
    pageSize: 10,
});
let bonus: any = reactive([])
let loading = shallowRef<boolean>(true)
let initData = async () => {
    loading.value = true
    const timestamp = new Date().getTime();
    await nextTick()
    await useAllData(
        timestamp + 'Bonus/Flow', `/Assets/v1.0/Bonus/Flow`, { ...bonusForm }
    ).then((res: any) => {
        loading.value = false
        bonus.push(...res.data.value.data.bonus);
        bonusForm.pageIndex++
    }).finally(() => {
        loading.value = false
        // debugger
    });
}
onBeforeMount(() => {
    initData()
})
onActivated(() => {

    initData()
})

</script>
<style scoped lang="scss">
:deep(.el-progress) {
    border-radius: 7.5px !important;
}

:deep(.el-progress-bar__inner) {
    background: rgb(0, 144, 109) !important;
    border-radius: 7.5px !important;
}

.bonus {
    width: 100%;
    main {
    padding: 45px 20px 20px;
    width: 100%;
    height: 80vh;
    overflow-y: auto;
    @include flex(column, flex-start, center);

    .nodata {
        width: 100%;
        height: 300px;

        img {
            width: 165px;
        }

        @include flex(column, center, center);

        >p {
            font-size: 17px;
            color: #b5bac8;
            margin-top: 20px;
        }
    }


    dl {
        width: 100%;
        overflow-y: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        flex: 1;

        dd {
            width: 100%;
            border: 1px solid #4a4c53;
            border-radius: 14px;
            padding: 12px 20px;
            margin-bottom: 20px;
            background-image: linear-gradient(#1c1e22, #1c1e22),
                linear-gradient(#fff, #fff);

            h3 {
                width: 100%;
                text-align: center;
                font-size: 16px;
                color: #fff;
            }

            strong {
                color: #fff;
                display: block;
            }

            >span {
                color: #fff;
                display: block;
                margin: 8px 0 14px 0;
            }

            >p {
                width: 100%;
                height: 15px;
                border-radius: 7.5px;
                background-color: #fff;
            }

            >div {
                width: 100%;
                margin-top: 8px;
                @include flex(row, space-between, center);

                i {
                    font-style: normal;
                    font-size: 16px;
                    color: #999;
                }

                span {
                    font-size: 14px;
                    color: #999;
                }
            }
        }
    }
}
}

</style>